<template>
  <div>
    <h1>我的页面</h1>
    <input type="button" value="去注册" @click="goReg" />
    <hr/>
    <p>store.state.age:{{age}}</p>
    <p>是否成年:{{isAdult}}</p>
    <input type="button" value="长大" @click="addAge">
    
    <FooterBar></FooterBar>
  </div>
</template>
  
  <script>
import FooterBar from "@/components/FooterBar.vue";
// mapState：映射仓库中的state到组件的computed上
// mapGetters：映射仓库中的getters到组件的computed上
// mapActions：映射仓库中的actions到组件的methods上
import {mapGetters, mapState,mapActions} from "vuex";

export default {
    name:"My",
    components:{
      FooterBar
    },
    created(){
      console.log("My.created");
      console.log("My. this.$route",this.$route);
      console.log("My. this.$route.query",this.$route.query);
    },
    computed:{
      ...mapState(["age"]),//mapState会把仓库中的state映射到组件的计算属性上。
      ...mapGetters(["isAdult"])
    }, 
    methods:{
      ...mapActions(["aAddAge"]),//把仓库里的action映射到本组件的methods里，既就是，给methods里定义了一个方法。
      addAge(){
        this.aAddAge();
      },  
      goReg(){
        // this.$router：就是在根vue对象植入的那个vue-router对象
        // push方法：把跳转的路径放到页面栈里，记录页面跳转的历史，方便后期做后退的工作。
        // this.$router.push("/Reg");
        this.$router.push({path:"/Reg"});

        // replace方法：用跳转的路径，替换页面栈最上面的那个路径。
        // this.$router.replace("/Reg");
      }
    }

}
</script>

<style>

</style>